<template>
  <div class="chargeManage">
    <div class="queryForm">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="用户名">
          <a-input v-model="queryForm.username" placeholder="请输入用户名" allow-clear/>
        </a-form-model-item>
        <a-form-model-item label="交易类型">
          <a-select v-model="queryForm.type" style="width: 200px" :allowClear="true">
            <a-select-option :value="item.value" v-for="(item,index) in typeList" :key="index">{{item.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="queryData" :loading="loading">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table :columns="columns" :data-source="tableData" :loading="tableLoading" :pagination="pagination"
             @change="pageChange" :rowKey="rowKey">
    </a-table>
  </div>
</template>

<script>
  import { getChargeList } from '../../serves';

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true
    },
    {
      title: '真实姓名',
      dataIndex: 'realName',
      key: 'realName',
      ellipsis: true
    },
    {
      title: '交易类型',
      dataIndex: 'refType',
      key: 'refType',
      ellipsis: true,
      customRender: (val) => {
        if (val == 1) {
          return '邀请收益';
        } else if (val == 2) {
          return '算力收益';
        } else if (val == 3) {
          return '团体收益';
        } else if (val == 4) {
          return '直推购买奖励';
        } else if (val == 5) {
          return '充值USDT';
        } else if (val == 6) {
          return 'FIL兑换USDT';
        } else if (val == 7) {
          return '后台赠送算力券';
        } else if (val == 11) {
          return '算力券支付';
        } else if (val == 12) {
          return 'USDT余额支付';
        } else if (val == 20) {
          return '提现前冻结';
        } else if (val == 21) {
          return '提现USDT';
        } else {
          return '提现失败回退';
        }
      }
    },
    {
      title: '交易数量',
      dataIndex: 'amount',
      key: 'amount',
      className: 'column-right'
    },
    {
      title: '交易前余额',
      dataIndex: 'before',
      key: 'before',
      className: 'column-right'
    },
    {
      title: '交易后余额',
      dataIndex: 'after',
      key: 'after',
      className: 'column-right'
    },
    {
      title: '交易时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    }
  ];
  export default {
    name: 'PromoteManage',
    data() {
      return {
        columns,
        tableLoading: false,
        tableData: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 20,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50']
        },
        lastPageSize: 20,
        queryForm: {
          username: '',
          type: ''
        },
        typeList: [
          {name: '邀请收益', value: '1'},
          {name: '算力收益', value: '2'},
          {name: '团体收益', value: '3'},
          {name: '直推购买奖励', value: '4'},
          {name: '充值USDT', value: '5'},
          {name: 'FIL兑换USDT', value: '6'},
          {name: '后台赠送算力券', value: '7'},
          {name: '算力券支付', value: '11'},
          {name: 'USDT余额支付', value: '12'},
          {name: '提现前冻结', value: '20'},
          {name: '提现USDT', value: '21'},
          {name: '提现失败回退', value: '22'}
        ],
        loading: false
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      queryData() {
        this.loading = true
        this.handleQuery();
      },
      rowKey(record, index) {
        return index;
      },
      handleQuery() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          username: this.queryForm.username,
          refType: this.queryForm.type
        };
        this.tableLoading = true;
        getChargeList(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.tableData = res.data.data.records;
            this.pagination.total = res.data.data.total;
            this.tableData.forEach((item) => {
              if ([4, 7, 11].indexOf(item.refType) > -1) {
                item['before'] = item.beforeCard + 'T';
                item['after'] = item.afterCard + 'T';
              } else if ([20, 21].indexOf(item.refType) > -1) {
                if (item.refType === 20 && item.type === 1) {
                  item['before'] = item.beforeLock + 'U';
                  item['after'] = item.afterLock + 'U';
                } else {
                  item['before'] = item.beforeFreeze + 'U';
                  item['after'] = item.afterFreeze + 'U';
                }
              } else if ([5, 6, 9, 12, 22].indexOf(item.refType) > -1) {
                if (item.refType === 22 && item.type === 2) {
                  item['before'] = item.beforeLock + 'U';
                  item['after'] = item.afterLock + 'U';
                } else {
                  item['before'] = item.beforeUsdt + 'U';
                  item['after'] = item.afterUsdt + 'U';
                }
              } else {
                item['before'] = item.beforeFil + 'F';
                item['after'] = item.afterFil + 'F';
              }
              if (item.type === 1) {
                item.amount = '+' + item.amount
              } else {
                item.amount = '-' + item.amount
              }
            });
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({path: '/manageLogin'});
          } else {
            this.$message.warning(res.data.message);
          }
          this.tableLoading = false;
          this.loading = false
        });
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize;
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1;
          this.lastPageSize = val.pageSize;
        } else {
          this.pagination.current = val.current;
        }
        this.handleQuery();
      }
    }
  };
</script>

<style lang="scss">
  .chargeManage {
    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 10px;
    }

    th.column-right,
    td.column-right {
      text-align: right !important;
    }
  }
</style>
